import Vue from 'vue';

/** 需求
 * 传入一个组件和组件的配置
 * 创建组件的实例，并且将它挂载到body上
 * 返回这个组件实例
 */
export default function create(Component, props) {
  // 实例创建
  // 作业：使用extend方式创建组件实例并挂载
  // extend方法返回的组件构造函数
  // const Ctor = Vue.extend(Component)
  // 获取组件实例  是一个虚拟dom
  // const comp = new Ctor({propsData:props})
  // comp.$mount();
  // document.body.appendChild(comp.$el);
  // 删除函数 给组件绑定一个方法
  // comp.remove = () => {
  //   // 移除dom
  //   document.body.removeChild(comp.$el);
  //   销毁组件;
  //   comp.$destroy();
  // };

  // 方式二：借鸡生蛋  参考main.js 中的写法
  const vm = new Vue({
    render: (h) => h(Component, { props }),
    // $mount()本质上将vdom=>dom  不能直接挂载到 body上，$mount()是一个覆盖过程
  }).$mount();

  // 通过 vm.$el 获取生成的 真实dom，绑定到 body上
  document.body.appendChild(vm.$el);

  // 获取组件实例 --> component
  const comp = vm.$children[0];

  // 删除函数 给组件绑定一个方法
  comp.remove = () => {
    // 移除dom
    document.body.removeChild(vm.$el);
    销毁组件;
    vm.$destroy();
  };

  // 返回组件实例
  return comp;
}
